import 'dart:developer';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:guochaoapp/common/utils/reg_utils.dart';
import 'package:guochaoapp/controller/login/login_controller.dart';
import 'package:guochaoapp/r.dart';
import 'package:get/get.dart';
import 'package:guochaoapp/routes/app_pages.dart';
import './widget/top_view.dart';

class GCLoginPage extends StatelessWidget {
  final c = Get.put(GCLoginController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: this._initSubviews());
  }

  _initSubviews() {
    return Scaffold(
        backgroundColor: Color(0xFFF4F8FE),
        body: ListView(children: [
          SizedBox(height: 29),
          GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Align(
              alignment: Alignment(0.87, 0),
              child: Image.asset(R.assetsIconX, height: 20, width: 20),
            ),
          ),
          SizedBox(height: 52),
          topIconView(),
          SizedBox(height: 70),
          _inputView(),
          SizedBox(height: 37),
          _loginButtonView(),
          SizedBox(height: 15),
          _registerButtonView(),
        ]));
  }

  _inputView() {
    int inputColor = 0xFF8EBEC5;
    TextStyle inputStyle = TextStyle(color: Color(inputColor), fontSize: 12);
    TextStyle textStyle = TextStyle(color: Color(0xFF4B98A0), fontSize: 13);
    UnderlineInputBorder underlineInputBorder =
        UnderlineInputBorder(borderSide: BorderSide(color: Color(inputColor)));
    return Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 25.0),
        child: Column(children: [
          passwordLoginForm(inputStyle, underlineInputBorder),
          smsLoginForm(inputStyle, underlineInputBorder),
          SizedBox(height: 15),
          Row(
            children: [
              Obx(() => GestureDetector(
                    onTap: c.changeLogin,
                    child: Text(
                      c.smsLogin.value ? "密码登录" : "短信验证码登录",
                      style: textStyle,
                    ),
                  )),
              Flexible(fit: FlexFit.tight, child: SizedBox()),
              GestureDetector(
                onTap: c.forgetPassword,
                child: Text("忘记密码", style: textStyle),
              ),
            ],
          )
        ])
        // key: controller.formKey
        );
  }

  Widget passwordLoginForm(inputStyle, underlineInputBorder) {
    return Obx(() => Offstage(
        offstage: c.smsLogin.value,
        child: Form(
            key: c.passwordLoginFormKey,
            child: Column(children: [
              TextFormField(
                  onChanged: (v) => c.loginAccount.value = v,
                  decoration: InputDecoration(
                      hintText: "手机号/用户名",
                      hintStyle: inputStyle,
                      focusedBorder: underlineInputBorder,
                      enabledBorder: underlineInputBorder),
                  validator: (v) {
                    return v.trim().length > 0 ? null : "手机号/用户名不能为空";
                  }),
              SizedBox(height: 20),
              TextFormField(
                onChanged: (v) => c.password.value = v,
                decoration: InputDecoration(
                  hintText: "密码",
                  hintStyle: inputStyle,
                  focusedBorder: underlineInputBorder,
                  enabledBorder: underlineInputBorder,
                  suffixIcon: IconButton(
                    onPressed: () => c.securePassword.toggle(),
                    icon: Image.asset(
                      R.assetsIconEyes,
                      height: 16,
                      width: 21,
                    ),
                  ),
                ),
                obscureText: c.securePassword.value,
                validator: (v) {
                  if (v.trim().length < 6) {
                    return "密码不能少于6位";
                  } else if (v.trim().length > 32) {
                    return "密码不能长于32位";
                  }
                  return null;
                },
              )
            ]))));
  }

  Widget smsLoginForm(inputStyle, underlineInputBorder) {
    return Obx(() => Offstage(
        offstage: !c.smsLogin.value,
        child: Form(
            key: c.smsLoginFormKey,
            child: Column(children: [
              TextFormField(
                  onChanged: (v) => c.phone.value = v,
                  decoration: InputDecoration(
                      hintText: "手机号",
                      hintStyle: inputStyle,
                      focusedBorder: underlineInputBorder,
                      enabledBorder: underlineInputBorder),
                  validator: (v) {
                    return RegUtils.isChinaPhoneLegal(v) ? null : "手机号格式异常";
                  }),
              SizedBox(height: 20),
              TextFormField(
                onChanged: (v) => c.randomCode.value = v,
                decoration: InputDecoration(
                  hintText: "验证码",
                  hintStyle: inputStyle,
                  focusedBorder: underlineInputBorder,
                  enabledBorder: underlineInputBorder,
                  suffixIcon: GestureDetector(
                    child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 10.0),
                        child: Text(
                            c.countDownTime.value > 0
                                ? "${c.countDownTime.value}s"
                                : "获取验证码",
                            style: TextStyle(
                                fontSize: 14, color: Color(0xFF6D6D6D)))),
                    onTap: c.getRandomCode,
                  ),
                ),
                validator: (v) {
                  return v.trim().length != 6 ? "请输入6位验证码" : null;
                },
              )
            ]))));
  }

  _loginButtonView() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 25.0),
      child: Row(
        children: [
          Expanded(
            child: RaisedButton(
              padding: EdgeInsets.all(15.0),
              child: Text("登录", style: TextStyle(fontSize: 15)),
              color: Color(0xFF228189),
              textColor: Colors.white,
              onPressed: c.loginButtonAction,
            ),
          ),
        ],
      ),
    );
  }

  _registerButtonView() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 25.0),
      child: Row(
        children: [
          Expanded(
            child: RaisedButton(
              padding: EdgeInsets.all(15.0),
              child: Text("注册",
                  style: TextStyle(color: Color(0xFF010C3C), fontSize: 15)),
              color: Color(0xFFECEBEB),
              textColor: Colors.white,
              onPressed: () {
                Get.toNamed('/register');
              },
            ),
          ),
        ],
      ),
    );
  }
}

// class _GCHomePageState extends State<GCLoginPage> {
//
// }
